@import "settings";

section.comments {
    background: darken($color-main-light, 3%);
    padding: 0;
    margin: 0 rem-calc(15) 0;
    border-radius: rem-calc(5);

    &.statistic {
        margin: 0 0 rem-calc(20);
        padding-top: rem-calc(20);
    }

    h3 {
        text-transform: uppercase;
        font-size: rem-calc(30);
    }

    .comment-item {
        .comment-body {
            background: $color-main-light;
            margin-bottom: 1em;
            padding: 9px 0.6em 0.6em 9px;
            border-radius: 0 0 rem-calc(5) rem-calc(5);

            .avatar {
                @include avatar-style;
                margin-top: -58px;

                @media only screen and (min-width: 48em) {
                    margin-top: -34px;
                    margin-right: 0;
                }

                @media only screen and (max-width: 40.0625em) {
                    display: none;
                }
            }

            .comment-text {
                margin-left: 0.6em;
                a {
                    &:hover, &:focus, &:active {
                        color: darken($color-main-contrast, 10%);
                    }
                }

                @media only screen and (min-width: 48em) {
                    margin-left: 99px;
                }

                .ua-note {
                    color: lighten($color-main-dark, 35%);
                    font-size: 75%;
                }
                hr {
                    margin: 0.5em 0 0.25em;
                    border: solid #DDD;
                    border-width: 1px 0 0;
                }
            }

            .comment-reply {
                margin: 0.5em 0 0;
                padding: 0.3em 0 0;
                text-align: right;

                span {
                    @include green-button;
                }
            }

            &:after {
                clear: both;
                display: block;
                content: '';
            }
        }

        .comment-header {
            background: $color-main-contrast;
            padding: 4px 1em 4px 108px;
            color: $color-main-light;
            border-radius: rem-calc(5) rem-calc(5) 0 0;
            font-weight: 400;

            time {
                float: right;
                display: inline;
                color: $color-main-light;
                max-width: 8em;

                @media only screen and (min-width: 48em) {
                    max-width: 100%;
                }
            }

            a {
                color: $color-comment-header-link;
                text-decoration: none;

                &:after {
                    content: '\21B5';
                }
                &:hover, &:focus, &:active {
                    color: darken($color-comment-header-link, 5%);
                }
            }

            &:after {
                visibility: hidden;
                display: block;
                content: '';
                clear: both;
            }

            .avatar {
                @include avatar-style;
                display: none;
            }

            @media only screen and (max-width: 40.0625em) {
                padding-left: 9px;
                padding-bottom: 8px;
                .avatar {
                    display: block;
                    margin-top: 3px;
                    margin-right: 13px;
                }
            }
        }

        @for $idx from 1 through 20 {
            &.depth-#{$idx} {
                margin-left: ($idx - 1) * 1.5rem;
            }
        }
    }

    #topic-reply {
        background: $color-main-light;
        margin-bottom: 1em;
        padding: 9px 0.6em 0.6em 9px;
        border-radius: 0 0 rem-calc(5) rem-calc(5);
        text-align: center;

        span {
            margin-left: rem-calc(16);
            @include green-button;
        }
    }

    #comment_add {
        position: relative;
        border: 2px $color-main-light solid;
        border-radius: rem-calc(5);
        background: darken($color-main-light, 8%);
        padding: 1em 0 0.5em;
        margin-bottom: 1em;

        form {
            .row:last-child {
                border-bottom: 2px $color-main-light dashed;
            }

            button {
                background: $color-main-contrast;
                font-weight: 400;
                border-radius: rem-calc(3);

                &:hover {
                    color: $color-main-light;
                    background: lighten($color-main-contrast, 5%);
                }
            }

            label.required-field:after {
                content: '*';
                color: $color-error;
                padding-left: 0.2em;
            }

            @media only screen and (min-width: 64em) {
                .columns:has(label) {
                    padding-right: 0;
                }

                label {
                    text-align: right;
                }
            }

            @media only screen and (max-width: 64em) {
                label.inline {
                    margin: 0;
                }
            }
        }

        .form_note {
            color: lighten($color-main-dark, 35%);
            font-size: 75%;
            text-align: center;
            padding-top: 0.5em;
        }

        small.error {
            font-style: normal;
        }
    }

    @media only screen and (max-width: 48em) {
        #comments-wrapper {
            padding-left: 0;
            padding-right: 0;
        }

        .comment-text {
            overflow-wrap: break-word;
        }
    }
}

section.comments.statistic .comment-item {
    .comment-body .avatar {
        margin-top: -34px;
        display: block;
    }
    .comment-body .comment-text {
        margin-left: 99px;
    }
    .comment-header {
        padding-left: 108px;
    }
}

@media only screen and (min-width: 40.0625em) {
    section.comments.statistic .comment-item {
        min-height: 128px;
    }
}

.ajax-loader {
    position: absolute;
    background-color: #FFF;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.5;
    display: none;
    // display: flex;
    justify-content: center;
    align-items: center;
}

/*
 * Based on https://loading.io/css/
 * https://github.com/loadingio/css-spinner/
 */
.ajax-loader:after {
    content: " ";
    display: block;
    border-radius: 50%;
    width: 0;
    height: 0;
    box-sizing: border-box;
    border: 128px solid $color-main-contrast;
    border-color: $color-main-contrast transparent $color-main-contrast transparent;
    animation: lds-hourglass 1.2s infinite;
}

@keyframes lds-hourglass {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    100% {
        transform: rotate(1800deg);
    }
}
